<template>
  <div class="machine_translation_wrapper">
    <div class="title">个性设置</div>
    <div class="radioitem">
      <label>机器翻译</label>
      <ul class="radio">
        <li @click="isMachineTran(true)" :class="{'selected': isMachineTrans==true}">是</li>
        <li @click="isMachineTran(false)" :class="{'selected':isMachineTrans==false}">否</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MachineTranslation',
  props: {
    comInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      isMachineTrans: false,// 机器翻译
    }
  },
  created() {

  },
  watch: {
    comInfo:{
      handler(val){
        if(!val) return;
        Object.keys(val).forEach(key=>{
          if(this.hasOwnProperty(key)){
            this[key] = val[key]
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    isMachineTran: function (flag) {
      this.isMachineTrans = flag;
    },
    // 外部获取当前组件的值
    getComponentVal() {
      return {
        isMachineTrans: this.isMachineTrans
      }
    }
  }
}
</script>

<style lang="less" scoped>
.machine_translation_wrapper {
  .radioitem {
    height: 34px;
    line-height: 14px;
    margin: 15px 0 15px 0;
    .radio {
      height: 14px;
      line-height: 14px;
      float: left;
      margin-top: 10px;
      width: auto;
      margin-left: 0;
      li {
        margin-right: 40px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        padding-left: 22px;
        display: inline-block;
        background: url("~@/assets/images/common/radio.png") no-repeat -119px 0;
        float: left;
        width: auto;
      }
      li.selected {
        background-position: 0 0;
      }
      li.selected[type="cursor"] {
        cursor: default;
      }
    }
    label {
      width: 100px;
      padding-right: 10px;
      text-align: right;
      float: left;
      line-height: 34px;
      color: #666;
    }
  }
}
</style>
